<template>
  <div :class="className" :id="id" :style="{height:height,width:width}"/>
</template>

<script>
import echarts from 'echarts'
import resize from '@/components/Charts/mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
      this.chart.setOption({
        backgroundColor: '#fff',
        title: {
          show: false,
          text: '付费订单统计',
          textStyle: {
            fontSize: 19
          }
        },
        color: ['#41a0f9', '#00FFFF'],
        tooltip: {
          trigger: 'item',
          formatter: '{b} : <br/>{c} ({d}%)'
        },
        // legend: {
        //   orient: 'horizontal',
        //   left: 'center',
        //   data: [
        //     { name: '课程订单', icon: 'stack' },
        //     { name: '班级订单', icon: 'pie' },
        //     { name: '会员订单', icon: 'pie' }
        //   ],
        //   bottom: 0,
        //   itemHeight: 20,
        //   itemWidth: 20,
        //   textStyle: {
        //     fontSize: 15
        //   }
        // },
        // graphic: [
        //   { // 设置饼状图内部文字
        //     type: 'text',
        //     left: 'center', // 设置偏移量
        //     top: '39%',
        //     z: 2,
        //     zlevel: 100,
        //     style: {
        //       text: '订单统计',
        //       x: 100,
        //       y: 100,
        //       textAlign: 'center',
        //       fill: '#808489',
        //       width: 200,
        //       height: 200,
        //       textFont: 'normal 20px verdana'
        //     }
        //   }
        // ],
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   },
        //   right: 0
        // },
        series: [
          {
            name: '付费订单',
            type: 'pie',
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: true
              }
            },
            labelLine: {
              show: true
            },
            radius: ['45%', '70%'],
            smooth: true,
            barWidth: 40,
            data: [
              { value: 200, name: '公开课详情页' },
              { value: 700, name: '公开课列表' }
            ]
          }
        ]
      })
    }
  }
}
</script>
